<template>
  <div class="page">
    <div class="user">
      <div class="nav-bar">
        <van-nav-bar
          :class="navBarSticky == true ? 'nav-bar-sticky' : ''"
          :title="navBarSticky == true ? '个人资料' : ''"
          left-text="返回"
          right-text="更换头像"
          left-arrow
          :border="false"
          :fixed="true"
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </div>
      <div class="user-lg-image">
        <van-image
          width="100%"
          height="100%"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <div class="nick-name">今夕何夕</div>
      <div
        class="triangle"
        :style="{ borderWidth: '0px 0px 50px ' + width + 'px' }"
      ></div>
      <div class="base-user-info">
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">TIM账号</div>
            <div class="custom-value">836994469</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">个性签名</div>
            <div class="custom-value custom-value-wh van-ellipsis ">
              你只需要记住，太阳每天都是新的，哈哈哈哈哈华盛顿哈师大
            </div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">昵称</div>
            <div class="custom-value">今夕何夕</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true" @click="toSpace()">
          <template #title>
            <div class="custom-title">空间</div>
            <div class="custom-value">今夕何夕的空间</div>
          </template>
        </van-cell>
        <van-cell value="" :center="true">
          <template #title>
            <div class="custom-title-more">添加更多资料</div>
          </template>
        </van-cell>
      </div>
      <div class="other-user-info">
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">性别</div>
            <div class="custom-value">男</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">生日</div>
            <div class="custom-value van-ellipsis">
              1992-03-23
            </div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">职业</div>
            <div class="custom-value">程序员</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">学校</div>
            <div class="custom-value">湖工大</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">地区</div>
            <div class="custom-value">湖北武汉</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">故乡</div>
            <div class="custom-value">湖北武汉</div>
          </template>
        </van-cell>
        <van-cell value="" is-link :center="true">
          <template #title>
            <div class="custom-title">邮箱</div>
            <div class="custom-value">未填写</div>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navBarSticky: false,
      width: 350
    };
  },
  mounted() {
    //滚动事件监听
    window.addEventListener("scroll", this.watchScroll);
    this.width = document.documentElement.clientWidth + 1;
  },
  methods: {
    watchScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 100) {
        this.navBarSticky = true;
      } else {
        this.navBarSticky = false;
      }
    },
    onClickLeft() {
      this.$router.push("/me");
    },
    onClickRight() {
      this.$toast("按钮");
    },
    toSpace() {
      this.$router.push("/space");
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.watchScroll);
  }
};
</script>

<style lang="less" scoped>
.user {
  .nav-bar {
    /deep/ .van-nav-bar {
      background: rgba(0, 0, 0, 0);
    }
    /deep/ .van-nav-bar .van-icon {
      color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__text {
      color: #ffffff;
    }
    .nav-bar-sticky {
      background: #f7f8fa;
      /deep/ .van-icon {
        color: black !important;
      }
      /deep/ .van-nav-bar__text {
        color: black !important;
      }
    }
  }
  .user-lg-image {
    height: 300px;
    img {
      opacity: 0.9;
    }
  }
  .nick-name {
    position: absolute;
    top: 250px;
    color: white;
    left: 10px;
    font-size: 20px;
  }
  .triangle {
    width: 0px;
    height: 0px;
    border-color: #ffff transparent;
    border-style: solid;
    position: absolute;
    top: 250.5px;
  }
  .custom-title {
    color: #625c5c;
  }
  .custom-value {
    font-size: 20px;
  }
  .custom-value-wh {
    width: 280px;
  }
  .custom-title-more {
    color: #1989fa;
    font-size: 17px;
  }
  .other-user-info {
    margin-top: 20px;
    padding-bottom: 70px;
  }
}
</style>
